import React, { Component, Fragment } from 'react';
import { Upload, Button, message, Icon } from 'antd';
import styles from './index.module.scss';
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
import { UploadChangeParam } from 'antd/lib/upload';
import { LocalImage } from '../../utils/tool/file'

interface StateInterface {
  isSelImag: boolean,
  resultData: string
}

interface PropsInterface {
}

class ComImageCropping extends Component<PropsInterface, StateInterface> {

  state: Readonly<StateInterface> = {
    isSelImag: false,
    resultData: ''
  }

  constructor(props: PropsInterface) {
    super(props)

    this.fileChange = this.fileChange.bind(this)
    this.tailoringBtnClick = this.tailoringBtnClick.bind(this)
  }

  cropperId = 'com-image-cropping-cropper'
  previewId = 'com-image-cropping-preview'

  cropper!: Cropper
  moveStep = 5

  static defaultProps = {
  }

  componentDidMount() {
    const dom = document.getElementById(this.cropperId) as any
    this.cropper = new Cropper(dom, {
      preview: `#${this.previewId}`,
      checkCrossOrigin: true
    })
  }

  fileChange(fileData: UploadChangeParam) {
    LocalImage(fileData.file as any).then((data) => {
      this.cropper.replace(data)
      this.setState(() => {
        return {
          isSelImag: true
        }
      })
    }).catch((e) => {
      console.log(e)
      message.error('图片选择失败')
    })
  }
  tailoringBtnClick() {
    this.setState(() => {
      return {
        resultData: this.cropper.getCroppedCanvas().toDataURL()
      }
    })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return (
      <div className={`${styles['com-image-cropping']} clearfix`}>
        <div className={styles['cropper-box']}>
          <img className={styles.img} id={this.cropperId} src="" alt="" />
        </div>
        <div className={styles['option-box']}>
          <Upload
            beforeUpload={() => false}
            showUploadList={false}
            accept={'.png, jpg, .jpeg'}
            onChange={this.fileChange}>
            <Button className={styles['sel-img-btn']} type="primary">
              选择图片
            </Button>
          </Upload>
          {
            this.state.isSelImag ?
              <Fragment>
                <div className={styles['option-btn-box']}>
                  <Button type="primary" onClick={() => { this.cropper.rotate(90) }}>
                    <Icon type="redo" />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.zoom(0.1) }}>
                    <Icon type="plus" />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.zoom(-0.1) }}>
                    <Icon type="minus" />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.scaleX( -this.cropper.getData().scaleX) }}>
                    <Icon type="column-width" />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.scaleY( -this.cropper.getData().scaleY) }}>
                    <Icon type="column-width" rotate={90} />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.move(0, -this.moveStep) }}>
                    <Icon type="arrow-up" />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.move(0, this.moveStep) }}>
                    <Icon type="arrow-down" />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.move(-this.moveStep, 0) }}>
                    <Icon type="arrow-left" />
                  </Button>
                  <Button type="primary" onClick={() => { this.cropper.move(this.moveStep, 0) }}>
                    <Icon type="arrow-right" />
                  </Button>
                  <Button block type="primary" onClick={ this.tailoringBtnClick }>
                    裁剪
                  </Button>
                </div>
                <div id={this.previewId} className={styles.preview}></div>
              </Fragment>
              :
              null
          }
        </div>
        {
          this.state.resultData ? <img className={ styles.result } src={ this.state.resultData } alt=""/> : null
        }
      </div>
    )
  }
}

export default ComImageCropping;
